<template>
  <div :id="id"></div>
  <div class="filter-dropdown" v-show="showFilter" :style="filterStyle" ref="filter">
    <div>
      <div style="text-align: left;margin-bottom: 10px">
        <a-checkbox v-model:checked="checkAll">全选</a-checkbox>
      </div>
      <div class="check-list">
        <a-checkbox-group
          v-model:value="checkedList"
          :options="filterItems"
          @change="onCheckboxChange"
        />
      </div>

      <div class="filter-btn">
        <a-button type="primary" size="small" style="margin-right: 30px" @click="onFilter"
          >确定</a-button
        >
        <a-button type="" size="small" @click="showFilter = false">取消</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.css';
import 'handsontable/languages/zh-CN';

const defaultSetting = {
  multiColumnSorting: {
    indicator: true, // 排序
    headerAction: true,
  },
  stretchH: 'all',
  width: '100%', //默认宽度
  autoWrapRow: true,
  height: 500, // 默认高度
  maxRows: 22, // 最大行数
  rowHeaders: true, // 显示表头
  licenseKey: 'non-commercial-and-evaluation',
  language: 'zh-CN',
  editor: false,
  colHeaders: true,
  filters: true,
};

export default {
  props: {
    id: String,
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    config: {
      type: Object,
      default: () => {},
    },
    filterItems: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      filterStyle: {
        top: 0,
        left: 0,
      },
      showFilter: false,
      checkedList: [...this.filterItems],
      checkAll: true,
      // sortConfig
      initialConfig: {},
    };
  },

  watch: {
    data: {
      handler(newVal, oldVal) {
        if (newVal && oldVal) {
          debugger;
          this.hotSettings = {
            ...this.hotSettings,
            data: newVal,
            multiColumnSorting: {
              ...this.hotSettings.multiColumnSorting,
              initialConfig: this.initialConfig,
            },
          };
          this.hotTable.updateSettings(this.hotSettings);
        }
      },
      deep: true,
    },
    columns: {
      handler(newVal, oldVal) {
        if (newVal && oldVal) {
          this.hotSettings = {
            ...this.hotSettings,
            columns: newVal,
            colHeaders: newVal.map(v => v.colHeader),
          };
          this.hotTable.updateSettings(this.hotSettings);
        }
      },
      deep: true,
    },
    config: {
      handler(newVal, oldVal) {
        if (newVal && oldVal) {
          this.hotSettings = {
            ...this.hotSettings,
            ...newVal,
          };
          this.hotTable.updateSettings(this.hotSettings);
        }
      },
      deep: true,
    },
  },

  mounted() {
    const container = document.getElementById(this.id);
    const self = this;
    // 合并配置
    this.hotSettings = {
      ...defaultSetting,
      data: this.data,
      columns: this.columns,
      colHeaders: this.columns.map(v => v.colHeader),
      ...this.config,
      afterOnCellMouseDown: () => {
        this.showFilter = false;
      },

      beforeDropdownMenuShow: dropdownMenu => {
        this.$emit('onFilterShow', this.clickColumn);
      },

      afterSelection: (row, column) => {
        if (row === -1) {
          this.clickColumn = column;
        }
      },
      beforeColumnSort: (sort, applySort) => {
        console.log(this.initialConfig);
        if (
          !applySort[0] ||
          this.initialConfig.column !== applySort[0].column ||
          this.initialConfig.sortOrder !== applySort[0].sortOrder
        ) {
          this.$emit('onSort', applySort);
          this.initialConfig = applySort[0] || {};
        }
      },
    };
    console.log(this.hotSettings);
    this.hotTable = new Handsontable(container, this.hotSettings);
    const $ = window.$;
    $('.changeType').on('click', function name(params) {
      self.showFilter = true;
      const pos = this.getBoundingClientRect();
      console.log('窗口宽度', window.innerWidth);
      console.log('位置', pos.left + 220);

      let posLeft = pos.left;
      if (window.innerWidth < pos.left + pos.width + 220) {
        posLeft = posLeft + pos.width - 220;
        debugger;
      }

      self.filterStyle = {
        top: pos.top + pos.height + 'px',
        left: posLeft + 'px',
      };
    });

    document.addEventListener('click', event => {
      console.log('addEventListener', event.target);
      if (!this.$refs.filter.contains(event.target)) {
        this.showFilter = false;
      }
    });
  },

  methods: {
    onAllCheck(newVal) {
      this.checkedList = newVal ? [...this.filterItems] : [];
    },
    // 筛选
    onFilter() {
      this.$emit('onFilter', { column: this.clickColumn, filters: this.checkedList });
      this.showFilter = false;
    },
    onCheckboxChange() {
      this.checkAll =
        this.checkedList.length > 0 && this.checkedList.length === this.filterItems.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-dropdown {
  width: 220px;
  height: 240px;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 10000;
  background-color: white;
  border-radius: 2px;
  padding: 10px 15px;
  box-shadow: 2px 2px 5px #888888;
  .filter-btn {
    position: absolute;
    margin-top: 10px;
    width: 100%;
    bottom: 10px;
    text-align: left;
  }
  .check-list {
    height: 150px;
    overflow-y: scroll;
    .ant-checkbox-group {
      display: flex;
      flex-direction: column;
      text-align: left;
      .ant-checkbox-group-item {
        margin-right: 0;
      }
    }
  }
}
</style>
